<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重庆创宇后天运维网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color:#ecf0f1;
        }
        .menu {
            display: flex;
            /* border: solid; */
            margin-top: 130px;
            margin-left: 250px;
            margin-right: 250px;
            justify-content: space-around;   
        }
        .header {
            margin-top: 20px;
        }
        div span {
            width: 270px;
            height: 420px;
            border: solid 2px #95a5a6;
        }
        h1 {
            display: flex;
            justify-content: center;
            color: #34495e;
            margin-top: 50px;
        }
        .two span{
            display: block;
            height: 142px;
            width: 267px;
            background: url('../static/images/资产登记表.png') center center no-repeat;
            border: none;
        }
        .three span{
            display: block;
            height: 142px;
            width: 267px;
            background: url('../static/images/下载.png') center center no-repeat;
            border: none;
        }
        .four span{
            display: block;
            height: 142px;
            width: 267px;
            background: url('../static/images/插件.png') center center no-repeat;
            border: none;
        }
        .five span{
            display: block;
            height: 142px;
            width: 267px;
            background: url('../static/images/运维.png') center center no-repeat;
            border: none;
        }
        h4 {
            display: flex;
            justify-content: center;
            padding: 20px 10px;
            color: #636e72; 
        }
        p {
            height: 110px;
            margin-top: 15px;
            padding: 0 15px;
            color: #636e72;
        }
        button {
            width: 170px;
            height: 35px;
            margin: 20px 50px;
            border-radius: 30px;
            border: solid 2px #95a5a6;
            outline:none
        }
        .two:hover,.three:hover,.four:hover,.five:hover {
            margin-top: -10px;
            box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.3);
        }
        button:hover {
            background-color:#c3d2fb;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>重庆创宇后天运维网</h1>
    </div>
    <div class="menu">
        
        <span class="two">
            <span></span>
            <h4>固定资产登记表</h4>
            <p>&nbsp;&nbsp;&nbsp;您可以进入资产登记页面，如果您是新员工，请填写电脑的固定资产编号，建议您仔细核对编号是否正确，我们将会把您的资产编号推送到火星平台绑定。</p>
            <button id="asset">点击进入</button>
        </span>
        <span class="three">
            <span></span>
            <h4>常用工作软件下载</h4>
            <p>&nbsp;&nbsp;&nbsp;点击下载您会收到一个文件，点击运行即可进入软件安装目录，选择需要的软件右键安装即可（如果您不能运行下载文件，请另存为桌面后再运行）。</p>
            <button id="software">点击下载</button>
        </span>
        <span class="four">
            <span></span>
            <h4>常用工作插件下载</h4>
            <p>&nbsp;&nbsp;&nbsp;存放了高亮插件，话机插件的仓库，点击对应的插件下载即可！注意：所有插件都需要解压后才能安装使用！</p>
            <button id="plug-in" >点击进入</button>
        </span>
        <span class="five">
            <span></span>
            <h4>诺贝尔自动化运维平台</h4>
            <p>&nbsp;&nbsp;&nbsp;点击进入到诺贝尔自动化运维平台，在这里您可以监控到整个公司的网络环境，后续新增的功能也在持续上线~</p>
            <button id="dev">点击进入</button>
        </span>
    </div>
    <script>
       var buttonGroupOne = document.querySelector('#asset');
       var buttonGroupTwo = document.querySelector('#software');
       var buttonGroupThree = document.querySelector('#plug-in');
       var buttonGroupFour = document.querySelector('#dev');
           
           buttonGroupOne.addEventListener('click',function(){
               window.open('index');
           })
           buttonGroupTwo.addEventListener('click',function(){
               location.href = 'download';
           })
           buttonGroupThree.addEventListener('click',function(){
               window.open('flashlist');
           })
           buttonGroupFour.addEventListener('click',function(){
               window.open('http://10.14.3.8:5200/#/login');
           }) 
    </script>
</body>
</html>